import React, {
  Component
} from 'react';
import { Table, message, Tabs, Button } from 'antd';
import axios from 'axios';
const TabPane = Tabs.TabPane;
import DetailsModal from './DetailsModal/index.jsx';
import ExamineModal from './ExamineModal/index.jsx';

class OrgManager extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      ToBeAuditeddata: [],
      visible: false,
      ExamineVisible: false,
      okey: '1',
      id: '',
      obj: '',
      realname: '',
      show: false,
      unApprove: false,
      Auditedcolumns: [{
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        sorter: (a, b) => a.id - b.id,
      },
      {
        title: '组织名称',
        dataIndex: 'orgName',
        key: 'orgName',
      }, {
        title: '姓名',
        dataIndex: 'realname',
        key: 'realname',
      }, {
        title: '手机',
        dataIndex: 'phone',
        key: 'phone',
      },
      {
        title: '用户数量',
        dataIndex: 'count',
        key: 'count',
      }, {
        title: '批准时间',
        dataIndex: 'approvalTime',
        key: 'approvalTime',
      },
      {
        title: '审核人',
        dataIndex: 'approver',
        key: 'approver',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
      },
      {
        title: '操作',
        dataIndex: '操作',
        key: '操作',
        width: 160,
        render: (text, record) => (
          <div className="TableOperation">
            <Button type="primary" size="small" onClick={() => this.ViewOrganization(record.id, false)}>查看</Button>
          </div>
        ),
      }
      ],
      ToBeAudited: [{
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        sorter: (a, b) => a.id - b.id,
      },
      {
        title: '姓名',
        dataIndex: 'realname',
        key: 'realname',
      }, {
        title: '手机',
        dataIndex: 'phone',
        key: 'phone',
      }, {
        title: '申请加入时间',
        dataIndex: 'crtTime',
        key: 'crtTime',
      }, {
        title: '申请理由',
        dataIndex: 'remark',
        key: 'remark',
      }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
      }, {
        title: '操作',
        dataIndex: '操作',
        key: '操作',
        width: 280,
        render: (text, record) => (
          <div className="TableOperation">
            <Button type="primary" size="small" onClick={() => this.ViewOrganization(record.id, true)}>查看</Button>
            <Button type="primary" size="small" onClick={() => this.ExamineShowModal(record.id, record.realname, 'adopt')}>通过</Button>
            <Button type="danger" size="small" onClick={() => this.ExamineShowModal(record.id, record.realname, 'refuse')}>拒绝</Button>
          </div>
        ),
      }
      ]
    };
  }

    callback = (key) => {
      if (key == '1') {
        this.HaveApproved(key);
      } else if (key == '0') {
        this.Unaudited(key);
      }
      this.setState({
        okey: key
      });
    }

    componentDidMount() {
      this.HaveApproved(1);
    }
    // 已审核
    HaveApproved = (key) => {
      const Token = sessionStorage.getItem('token');
      const _this = this;
      axios({
        method: 'get',
        url: 'api/admin/approve/approvestatus',
        headers: {
          Authorization: Token
        }
      })
        .then(function(response) {
          let oData = [];
          response.data.forEach((item, i) => {
            if (item.status == '0') {
              item.status = '审核中';
            } else if (item.status == '1') {
              item.status = '通过';
            } else if (item.status == '-1') {
              item.status = '拒绝';
            }
            oData.push({
              'key': item.id,
              'id': item.id,
              'orgName': item.orgName,
              'realname': item.realname,
              'phone': item.phone,
              'count': item.usernum,
              'approvalTime': item.approvalTime,
              'approver': item.username,
              'status': item.status
            });

          });
          _this.setState({
            data: oData
          });
        })
        .catch(function(error) {
          console.log(error);
          message.error('服务器开小差啦，请重试！');
        });
    }
    // 未审核
    Unaudited = (key) => {
      const Token = sessionStorage.getItem('token');
      const _this = this;
      axios({
        method: 'get',
        url: 'api/admin/approve/unApprovestatus',
        headers: {
          Authorization: Token
        }
      })
        .then(function(response) {
          let Data = [];
          response.data.forEach((item, i) => {
            if (item.status == '0') {
              item.status = '审核中';
            } else if (item.status == '1') {
              item.status = '通过';
            } else if (item.status == '-1') {
              item.status = '拒绝';
            }
            Data.push({
              'key': item.id,
              'id': item.id,
              'phone': item.phone,
              'remark': item.remark,
              'status': item.status,
              'crtTime': item.crtTime,
              'realname': item.realname
            });

          });
          _this.setState({
            ToBeAuditeddata: Data
          });
        })
        .catch(function(error) {
          console.log(error);
          message.error('服务器开小差啦，请重试！');
        });
    }
    // 通过
    adopt = (id) => {
      const Token = sessionStorage.getItem('token');
      const _this = this;
      axios({
        method: 'post',
        url: '/api/admin/approve/org?id=' + id + '&status=' + 1,
        headers: {
          Authorization: Token
        }
      })
        .then(function(response) {
          // console.log(response);
          message.success(response.data.message);
          _this.Unaudited(0);
        })
        .catch(function(error) {
          console.log(error);
          message.error('服务器开小差啦，请重试！');
        });
    }

    // 拒绝
    refuse = (id) => {
      // console.log("拒绝");
      const Token = sessionStorage.getItem('token');
      const _this = this;
      axios({
        method: 'post',
        url: '/api/admin/approve/org?id=' + id + '&status=' + -1,
        headers: {
          Authorization: Token
        }
      })
        .then(function(response) {
          // console.log(response);
          _this.Unaudited(0);
          message.warning(response.data.message);
        })
        .catch(function(error) {
          console.log(error);
          message.error('服务器开小差啦，请重试！');
        });
    }

    ViewOrganization = (id, unApprove) => {
      if (unApprove) {
        this.setState({
          visible: true,
          id: id,
          unApprove: true
        });
      } else {
        this.setState({
          visible: true,
          id: id,
          unApprove: false
        });
      }
    }

    hideModal = () => {
      this.setState({
        visible: false,
      });
    }
    ExaminehideModal = () => {
      this.setState({
        ExamineVisible: false,
      });
    }

    ExamineShowModal = (id, realname, obj) => {
      this.setState({
        ExamineVisible: true,
        id: id,
        realname: realname,
        obj: obj
      });
    }

    SeeDetails = () => {
      this.setState({
        visible: false,
      });
    }

    adoptSave = () => {
      if (this.state.obj == 'refuse') {
        this.refuse(this.state.id);
      } else if (this.state.obj == 'adopt') {
        this.adopt(this.state.id);
      }

      this.setState({
        ExamineVisible: false
      });
    }
    render() {
      return (
        <Tabs defaultActiveKey="1" onChange={this.callback}>
          <TabPane tab="已审核" key="1">
            <Table columns={this.state.Auditedcolumns} dataSource={this.state.data} rowKey="id" bordered />
            <DetailsModal
              visible={this.state.visible}
              onCancel={this.hideModal}
              onCreate={this.SeeDetails}
              okey={this.state.okey}
              ID={this.state.id}
              unApprove={this.state.unApprove}
              show={this.state.show}
            />
            {/* <a ref='btn' download href="http://sinochem.oss-cn-beijing.aliyuncs.com/cert/201805151957477456.pem"  >下载</a> */}
          </TabPane>
          <TabPane tab="未审核" key="0">
            <Table columns={this.state.ToBeAudited} dataSource={this.state.ToBeAuditeddata} rowKey="id" bordered />
            <ExamineModal
              ExamineVisible={this.state.ExamineVisible}
              onCancel={this.ExaminehideModal}
              onCreate={this.adoptSave}
              realname={this.state.realname}
              ID={this.state.id}
              obj={this.state.obj}
            />
          </TabPane>
        </Tabs>
      );
    }
}

export default OrgManager;